import { createBrowserRouter, Navigate } from 'react-router-dom';
import Main from '@/pages/main';
import Home from '@/pages/home/index.js';
import LayoutPage from '@/pages/layout';
import FirstOtherPage from '@/pages/other/page1';
import SecondOtherPage from '@/pages/other/page2';
import  TablePage from '@/pages/other/page3/table'
import MallPage from '@/pages/mall';
import Table from '@/pages/Table';
import Login from '@/pages/login/index'

const routes = [
  {
    path: '/',
    element: <Main />, // 使用 element 代替 Component
    children: [
      {
        path: '/',
        element: <Navigate to='/LayoutPage' replace />
      },
      {
        path: '/LayoutPage',
        element: <LayoutPage />,
        children: [
          {
            path: 'home',
            element: <Home />,
          },
          {
            path: 'reusable',
            element: <Table />,
          },
          {
            path: 'moibel',
            element: <MallPage />,
          },
          {
            path: 'other',
            children: [
              {
                path: 'pageOne',
                element: <FirstOtherPage />,
              },
              {
                path: 'pageTwo',
                element: <SecondOtherPage />,
              },
              {
                path: 'pageThree',
                element: <TablePage/>,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: '/login',
    Component: Login
  }
];

export default createBrowserRouter(routes);
